<template>
	<div
		class="level-panel border-transparent bg-border-1 border-[10px] rounded-[12px]"
		style="background: #1b2538">
		<div
			class="w-full rounded-lg md:px-[20px] px-4 pt-3 pb-2 grid grid-cols-1 gap-4 relative min-h-[168px]"
			:class="bgClass">
			<div class="flex flex-col sm:flex-row sm:w-full sm:gap-8">
				<div class="sm:w-1/2 w-full" :style="vertical && 'width: 100%'">
					<div class="w-full flex gap-4">
						<account-avatar :data="userInfo?.avatar" :width="60" @click="handleProfile" />
						<div class="flex flex-col justify-center">
							<template v-if="accountStore.isLogin">
								<p class="text-lg text-white">
									{{ userInfo?.nickName || userInfo?.userName }}
								</p>
								<div style="display: flex; align-items: center">
									<img :src="vipBonusStatus.currentVipIcon" alt="" class="w-[20px]" />

									<p class="user-info-level text-sm text-white">
										{{ vipBonusStatus.currentVipName }}
									</p>
								</div>
							</template>
						</div>
					</div>
					<div style="font-size: 12px; margin-top: 12px">
						<template
							v-if="
								$t('vipNextLevelXP', { xp: vipBonusStatus.nextExp }).split(
									vipBonusStatus.nextExp + ' XP'
								)
							">
							{{
								$t('vipNextLevelXP', { xp: vipBonusStatus.nextExp }).split(
									vipBonusStatus.nextExp + ' XP'
								)[0]
							}}
							<span style="color: #bbc5c7">{{ vipBonusStatus.nextExp }} XP</span>
							{{
								$t('vipNextLevelXP', { xp: vipBonusStatus.nextExp }).split(
									vipBonusStatus.nextExp + ' XP'
								)[1]
							}}
						</template>
					</div>
					<div class="mt-[2px]">
						<n-progress
							type="line"
							color="var(--color-success)"
							:percentage="Number(vipBonusStatus.expPercentage)"
							:height="12"
							indicator-text-color="var(--color-success)" />
						<div class="flex justify-between items-center pt-1">
							<div class="user-level-number user-level-current flex items-center">
								<img :src="vipBonusStatus.currentVipIcon" alt="" class="w-[20px]" />

								<p class="user-info-level text-sm text-white ml-1">
									{{ vipBonusStatus.currentVipName }}
								</p>
							</div>

							<div
								class="user-level-number user-level-current flex items-center"
								v-if="Number(level.progress) !== 100">
								<img :src="vipBonusStatus.nextVipIcon" alt="" class="w-[20px]" />

								<p class="user-info-level text-sm text-white ml-1">
									{{ vipBonusStatus.nextVipName }}
								</p>
							</div>
						</div>
					</div>
					<div class="text-white font-normal" style="font-size: 12px; margin-top: 10px">
						<template v-if="$t('vipBenefitDesc', { percent: '75%' }).split('75%')">
							{{ $t('vipBenefitDesc', { percent: '75%' }).split('75%')[0] }}
							<span class="text-[#00BD79]">75%</span>
							{{ $t('vipBenefitDesc', { percent: '75%' }).split('75%')[1] }}
						</template>
					</div>
				</div>

				<!--				<div class="flex flex-col justify-center items-end">-->
				<!--					<div class="xl:max-w-[400px] w-full max-w-full">-->
				<!--						<div v-html="content" />-->
				<!--						<base-button-->
				<!--							v-if="item.ableBet"-->
				<!--							type="primary"-->
				<!--							block-->
				<!--							round-->
				<!--							@click.stop="$router.push('/')"-->
				<!--							class="!w-fit h-[28px]">-->
				<!--							{{ $t('rewards.betNow') }}-->
				<!--						</base-button>-->
				<!--					</div>-->
				<!--				</div>-->
				<div class="sm:w-1/2 w-full" v-if="!vertical" style="border-radius: 5px; overflow: hidden">
					<base-image
						:src="bannerSrc"
						class="w-full h-full mt-2 sm:mt-0"
						:class="{ 'opacity-10': item.img === 'activity/banner-benefit.png' }" />
				</div>
			</div>
			<div class="w-full" v-if="vertical">
				<base-image
					:src="bannerSrc"
					class="w-full h-full mt-2 sm:mt-0"
					:class="{ 'opacity-10': item.img === 'activity/banner-benefit.png' }" />
			</div>
			<!--			<base-icon-->
			<!--				@click="onClickDetail"-->
			<!--				class="absolute right-2 top-2 text-t-3"-->
			<!--				size="16"-->
			<!--				name="hint"></base-icon>-->
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { BaseImage } from '@/components/base'
import { NProgress } from 'naive-ui'
import { AccountAvatar } from '@/components/account'
import { UserInfo } from '@/types'
import { useAccountStore, useAppStore, useProfileStore } from '@/store'
import { getVipBonusStatus } from '@/api/activity'
//import { goDetails } from '@/utils'

defineProps({
	vertical: {
		type: Boolean,
		default: false
	},
	item: Object as any,
	level: Object as any,
	bgClass: {
		type: String
		//default: 'bg-gradient-2'
	}
})
const appStore = useAppStore()
const bannerSrc = computed(() =>
	appStore.lang === 'en' ? 'activity/banner-en.png' : 'activity/user-right-banner.png'
)
//const content = computed(() => props.item.content)
const profileStore = useProfileStore()
const accountStore = useAccountStore()
const userInfo: any = computed<UserInfo | null>(() => profileStore.userInfo)
const handleProfile = () => {
	profileStore.showProfile({
		show: true,
		userId: profileStore.userInfo?.userId
	})
}

// const onLogin = () => {
// 	accountStore.showAccount(AccountShowType.login)
// }
const vipBonusStatus = ref<any>({
	expPercentage: ''
})
getVipBonusStatus().then((res) => {
	vipBonusStatus.value = res.data
})
/*const onClickDetail = () => {
	console.log(props.item)
	if (props.item.link) {
		goDetails(props.item.link)
	}
}*/
</script>

<style scoped>
:deep(.n-progress .n-progress-graph .n-progress-graph-line .n-progress-graph-line-rail) {
	background-color: #00000080;
}
</style>
